import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: ScaffoldDemo(),
    );
  }
}

class ScaffoldDemo extends StatefulWidget {
  @override
  _ScaffoldDemoState createState() => _ScaffoldDemoState();
}

class _ScaffoldDemoState extends State<ScaffoldDemo> {
  int _selectedIndex = 0;
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  // 自定义带装饰的抽屉菜单
  Widget _buildDrawer() {
    return Drawer(
      child: MediaQuery.removePadding(
        context: context,
        removeTop: true, 
        child: Column(
          children: [
            // 顶部区域（带背景装饰）
            DecoratedBox(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.blue.shade800, Colors.blue.shade400],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(20),
                  bottomRight: Radius.circular(20),
                ),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black12,
                    blurRadius: 10,
                    offset: Offset(0, 5),
                  )
                ],
              ),
              child: Container(
                padding: EdgeInsets.all(32),
                child: Row(
                  children: [
                    CircleAvatar(
                      radius: 40,
                      backgroundColor: Colors.white,
                      child: Icon(
                        Icons.person,
                        size: 50,
                        color: Colors.blue.shade800,
                      ),
                    ),
                    SizedBox(width: 16),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'YangXi',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          '学号：20231060140',
                          style: TextStyle(color: Colors.white70, fontSize: 14),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),

            // 菜单列表（带分隔线装饰）
            Expanded(
              child: ListView(
                children: [
                  // 带点击反馈的菜单项（使用DecoratedBox作为背景）
                  _buildDecoratedListTile(
                    icon: Icons.person,
                    title: '个人中心',
                    onTap: () => Navigator.pop(context),
                    // 未选中时的背景装饰
                    normalDecoration: BoxDecoration(
                      border: Border(
                        bottom: BorderSide(color: Colors.grey.shade200, width: 1),
                      ),
                    ),
                    // 选中时的背景装饰（点击反馈）
                    selectedDecoration: BoxDecoration(
                      color: Colors.grey.shade100,
                      border: Border(
                        bottom: BorderSide(color: Colors.grey.shade200, width: 1),
                      ),
                    ),
                  ),
                  _buildDecoratedListTile(
                    icon: Icons.settings,
                    title: '设置中心',
                    onTap: () => Navigator.pop(context),
                    normalDecoration: BoxDecoration(
                      border: Border(
                        bottom: BorderSide(color: Colors.grey.shade200, width: 1),
                      ),
                    ),
                    selectedDecoration: BoxDecoration(
                      color: Colors.grey.shade100,
                      border: Border(
                        bottom: BorderSide(color: Colors.grey.shade200, width: 1),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 封装带装饰的列表项组件
  Widget _buildDecoratedListTile({
    required IconData icon,
    required String title,
    required VoidCallback onTap,
    required BoxDecoration normalDecoration,
    required BoxDecoration selectedDecoration,
  }) {
    return InkWell(
      // 点击水波纹效果
      splashColor: Colors.blue.shade100,
      highlightColor: Colors.blue.shade50,
      onTap: onTap,
      child: DecoratedBox(
        // 根据状态切换装饰
        decoration: _isSelected ? selectedDecoration : normalDecoration,
        child: ListTile(
          leading: Icon(icon, color: Colors.blue.shade800),
          title: Text(title, style: TextStyle(color: Colors.blue.shade800)),
        ),
      ),
    );
  }

  // 模拟选中状态（可根据实际业务逻辑修改）
  bool get _isSelected => _selectedIndex == 2;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 为Scaffold添加key
      key: _scaffoldKey,
      
      // 1. AppBar 导航栏
      appBar: AppBar(
        title: Text("演示"),
        leading: IconButton(
          icon: Icon(Icons.menu), // 菜单图标
          // 使用GlobalKey打开抽屉
          onPressed: () => _scaffoldKey.currentState?.openDrawer(),
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () => print("搜索"),
          )
        ],
      ),

      // 2. 抽屉菜单（左侧）
      drawer: _buildDrawer(),

      // 3. 底部导航栏
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "首页",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: "分类",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: "设置",
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) => setState(() => _selectedIndex = index),
        selectedItemColor: Colors.blue, // 选中颜色
      ),

      // 4. 悬浮按钮
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => print("添加内容"),
        backgroundColor: Colors.blue,
      ),

      // 页面主体内容
      body: Center(
        child: Text(
          "当前选中：${_selectedIndex == 0 ? '首页' : _selectedIndex == 1 ? '分类' : '设置'}",
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}